Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
vite-plugin-css-injected-by-js
Advanced tools
A Vite plugin that takes the CSS and adds it to the page through the JS. For those who want a single JS file.
vite-plugin-css-injected-by-js is a Vite plugin that allows you to inject CSS directly into the JavaScript bundle. This can be useful for scenarios where you want to avoid separate CSS files and ensure that styles are loaded synchronously with your JavaScript.
Inject CSS into JavaScript
This feature allows you to configure Vite to inject CSS directly into the JavaScript bundle. By using the `cssInjectedByJsPlugin` in the Vite configuration, the CSS will be included in the JavaScript output, ensuring that styles are applied as soon as the JavaScript is executed.
import { defineConfig } from 'vite';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
export default defineConfig({
plugins: [cssInjectedByJsPlugin()]
});
vite-plugin-style-import is a Vite plugin that allows you to import styles on demand. Unlike vite-plugin-css-injected-by-js, which injects CSS into the JavaScript bundle, vite-plugin-style-import focuses on importing styles only when they are needed, reducing the initial load time.
vite-plugin-css-modules is a Vite plugin that provides support for CSS Modules. It allows you to scope CSS by automatically generating unique class names. While vite-plugin-css-injected-by-js injects CSS into JavaScript, vite-plugin-css-modules focuses on modularizing CSS to avoid style conflicts.
A Vite plugin that takes the CSS and adds it to the page through the JS. For those who want a single JS file.
The plugin can be configured to execute the CSS injection before or after your app code, and you can also provide a custom id for the injected style element and other configurations that fulfill some particular cases, even for libs.
Essentially what it does is take all the CSS generated by the build process and add it via JavaScript. The CSS file is therefore not generated and the declaration in the generated HTML file is also removed. You can also configure when the CSS injection will be executed (before or after your app code).
npm i vite-plugin-css-injected-by-js --save
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin(),
]
}
When you add the plugin, you can provide a configuration object. Below you can find all configuration parameters available.
The cssAssetsFilterFunction
parameter allows you to specify a filter function that will enable you to exclude some
output css assets.
This option is not applied to relativeCSSInjection
logic.
Here is an example of how to use the cssAssetsFilterFunction
:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({
cssAssetsFilterFunction: function customCssAssetsFilterFunction(outputAsset) {
return outputAsset.fileName == 'font.css';
}
}),
]
}
EXPERIMENTAL Why experimental? Because it uses a non-conventional solution.
Previously, the plugin strictly applied logic solely during the build phase. Now, we have the capability to experiment with it in the development environment.
To activate the plugin in the development environment as well, you need to configure a dev object and set the enableDev parameter to true.
Here's an example:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({
dev: {
enableDev: true,
removeStyleCodeFunction: function removeStyleCode(id: string) {
// The 'id' corresponds to the value of the 'data-vite-dev-id' attribute found on the style element. This attribute is visible even when the development mode of this plugin is not activated.
}
}
}),
]
}
This approach should serve its purpose effectively unless you're employing custom injection code to insert styles where necessary. Since the development environment involves the concept of "updating" styles in the Document Object Model ( DOM), this plugin requires code to remove the injected style from the DOM.
Due to these factors, if you're utilizing custom injection code (via injectCode
or injectCodeFunction
), the plugin
cannot automatically discern how to delete the injected style. Therefore, all you need to do is configure
either removeStyleCode
or removeStyleCodeFunction
within the dev
object as demonstrated above.
NOTE: The injectCode
and injectCodeFunction
parameters now also include the attributes
, and in dev
mode,
the attributes
object encompasses the data-vite-dev-id
as well. Refer to the injectCodeFunction
example below for
further details.
You can provide also a function for injectCode
param to customize the injection code used. The injectCode
callback
must return a string
(with valid JS code) and it's called with two arguments:
string
that contains all the css code that need to be injected via JavaScript)styleId
, useStrictCSP
and attributes
the last is an object that represent the attributes
of the style element that should have)This is an example:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({
injectCode: (cssCode: string, options: InjectCodeOptions) => {
return `try{if(typeof document != 'undefined'){var elementStyle = document.createElement('style');elementStyle.appendChild(document.createTextNode(${cssCode}));document.head.appendChild(elementStyle);}}catch(e){console.error('vite-plugin-css-injected-by-js', e);}`
}
}),
]
}
If you prefer to specify the injectCode as a plain function you can use the injectCodeFunction
param.
The injectCodeFunction
function is a void function that will be called at runtime application with two arguments:
string
that contains all the css code that need to be injected via JavaScript)styleId
, useStrictCSP
and attributes
the last is an object that represent the attributes
of the style element that should have)This is an example:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({
injectCodeFunction: function injectCodeCustomRunTimeFunction(cssCode: string, options: InjectCodeOptions) {
try {
if (typeof document != 'undefined') {
var elementStyle = document.createElement('style');
// SET ALL ATTRIBUTES
for (const attribute in options.attributes) {
elementStyle.setAttribute(attribute, options.attributes[attribute]);
}
elementStyle.appendChild(document.createTextNode(${cssCode}));
document.head.appendChild(elementStyle);
}
} catch (e) {
console.error('vite-plugin-css-injected-by-js', e);
}
}
}),
]
}
You can specify the format of the injection code, by default is iife
.
The jsAssetsFilterFunction
parameter allows you to specify which JavaScript file(s) the CSS injection code should be
added to. This is useful when using a Vite configuration that exports multiple entry points in the building process. The
function takes in an OutputChunk object and should return true for the file(s) you wish to use as the host of the CSS
injection. If multiple files are specified, the CSS injection code will be added to all files returned as true.
Here is an example of how to use the jsAssetsFilterFunction
:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({
jsAssetsFilterFunction: function customJsAssetsfilterFunction(outputChunk) {
return outputChunk.fileName == 'index.js';
}
}),
]
}
In this example, the CSS injection code will only be added to the index.js
file. If you wish to add the code to
multiple files, you can specify them in the function:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({
jsAssetsFilterFunction: function customJsAssetsfilterFunction(outputChunk) {
return outputChunk.fileName == 'index.js' || outputChunk.fileName == 'subdir/main.js';
}
}),
]
}
This code will add the injection code to both index.js and main.js files. Be aware that if you specified multiple files that the CSS can be doubled.
You can use the preRenderCSSCode
parameter to make specific changes to your CSS before it is printed in the output JS
file. This parameter takes the CSS code extracted from the build process and allows you to return the modified CSS code
to be used within the injection code.
This way, you can customize the CSS code without having to write additional code that runs during the execution of your application.
This is an example:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({preRenderCSSCode: (cssCode) => cssCode}), // The return will be used as the CSS that will be injected during execution.
]
}
This feature is based on information provided by Vite. Since we can't control how Vite handles this information this means that there may be problems that may not be possible to fix them in this plugin.
The default behavior of this plugin takes all the CSS code of your application directly to the entrypoint generated.
The relativeCSSInjection
if configured to true
will inject the CSS code of every entrypoint to the relative
importer.
Set this option to true
if you are using the multiple entry point option of Rollup.
For this feature to work, build.cssCodeSplit
must be set to true
Future release can have an advanced behavior where this options will be configured to true automatically by sniffing user configurations.
If a CSS chunk is generated that's not imported by any JS chunk, a warning will be shown. To disable this warning
set suppressUnusedCssWarning
to true
.
If you provide a string
for styleId
param, the code of injection will set the id
attribute of the style
element
with the value of the parameter provided. This is an example:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({styleId: "foo"}),
]
}
The output injected into the DOM will look like this example:
<head>
<style id="foo">/* Generated CSS rules */</style>
</head>
If you provide a function
for styleId
param, it will run that function and return a string. It's especially useful
if you use relativeCSSInjection
and want unique styleIds for each file.
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({styleId: () => `foo-${Math.random() * 100}`}),
]
}
<head>
<style id="foo-1234">/* Generated CSS rules */</style>
<style id="foo-4321">/* Generated CSS rules */</style>
</head>
The default behavior adds the injection of CSS before your bundle code. If you provide topExecutionPriority
equal
to: false
the code of injection will be added after the bundle code. This is an example:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({topExecutionPriority: false}),
]
}
The useStrictCSP
configuration option adds a nonce to style tags based
on <meta property="csp-nonce" content={{ nonce }} />
. See the following link for
more information.
This is an example:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
export default {
plugins: [
cssInjectedByJsPlugin({useStrictCSP: true}),
]
}
The tag <meta property="csp-nonce" content={{ nonce }} />
(nonce should be replaced with the value) must be present in
your html page. The content
value of that tag will be provided to the nonce
property of the style
element that
will be injected by our default injection code.
When you make changes to plugin locally, you may want to build the js from the typescript file of the plugin.
Here the guidelines:
npm install
npm run test
npm run build
See CONTRIBUTING.md for more information.
At first the plugin supported generating the CSS injection code also in the legacy files generated by the plugin-legacy. Since the plugin-legacy injects the CSS code for different reasons, this plugin no longer has the plugin-legacy support code. If the code of the plugin-legacy changes an update to this plugin may occur.
FAQs
A Vite plugin that takes the CSS and adds it to the page through the JS. For those who want a single JS file.
We found that vite-plugin-css-injected-by-js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.